<!--
 * @Author: jiangyg email@jiangyg.com
 * @Date: 2022-08-14 15:31:12
 * @LastEditors: jiangyg email@jiangyg.com
 * @LastEditTime: 2022-12-12 04:12:45
 * @FilePath: /frontend/mall-frontend/src/views/commons/search-input.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <el-row>
    <el-col :span="4">
      <router-link :to="{ name: 'index' }">
        <el-image style="width: 134px; height: 42px" src="/images/logo.png" fit="fill" />
      </router-link>
    </el-col>
    <el-col class="search-box" :span="12">
      <el-row>
        <el-col :span="24">
          <!-- TODO BUG：有闪动效果 -->
          <el-autocomplete size="large" style="width: 100%;" v-model="searchContents" :fetch-suggestions="loadSuggestionEvent"
            placeholder="请输入搜索内容" @select="handleSuggestSelectEvent" @keyup.enter="executeSearchEvent" :debounce="500"
            :hide-loading="true">
            <template #suffix>
              <icon-svg name="search" :size="1.3" @click="executeSearchEvent" style="cursor: pointer;" />
            </template>
          </el-autocomplete>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <div class="search-history-list">
            <el-link type="info" :underline="false">游戏手机</el-link>
            <el-link type="info" :underline="false">游戏电视</el-link>
            <el-link type="info" :underline="false">进口好物</el-link>
            <el-link type="info" :underline="false">茅台镇酒</el-link>
          </div>
        </el-col>
      </el-row>
    </el-col>
    <el-col style="padding-left: 8px" :span="4">
      <el-badge :value="12" class="item">
        <el-button size="large" type="danger" @click="toCartPage" plain>
          <icon-svg name="cart-empty" :size="1.3" />&nbsp;我的购物车
        </el-button>
      </el-badge>
    </el-col>
  </el-row>
</template>
<script lang="ts" setup>
import { ref, onMounted } from "vue";
import { useRouter } from "vue-router";
import http from "@/utils/httpRequest.js";

const router = useRouter();
const searchContents = ref("");

// 属性定义
const props = defineProps({
  keyword: {
    type: String,
    default: "",
  },
});

// 组件挂载完成后执行
onMounted(() => {
  // 没有搜索参数则跳转首页
  // if (!props.keyword) {
  //   router.push({ name: "index" });
  // }
  // 查询参数回显
  searchContents.value = props.keyword;
});

// 查询事件处理
const executeSearchEvent = () => {
  router.push({
    name: "redirect-search",
    query: {
      keyword: searchContents.value,
    },
  });
};

// 加载检索建议数据
const loadSuggestionEvent = (val: string, callback) => {
  if (!val || !val.trim()) {
    callback([]);
    return;
  }
  http
    .post({
      url: "/search/sku/suggest",
      data: { keyword: val }
    })
    .then(({ data }) => {
      if (http.success(data, false)) {
        callback(data.body.map(item => { return { value: item } }));
      }
    });
};

// 选中检索建议触发事件
const handleSuggestSelectEvent = (item) => {
  if (!item || !item.value) {
    return;
  }
  searchContents.value = item.value;
  executeSearchEvent();
}

// 跳转购物车页面
const toCartPage = () => {
  router.push({
    name: "cart",
  });
};
</script>

<style lang="scss" scoped>
.search-box {

  .el-input-group__append {
    background-color: #ff0000;
  }

  .el-icon-search {
    color: #ffffff;
    font-weight: bold;
  }

  .search-history-list .el-link {
    margin-right: 8px;
  }
}
</style>
